<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="ShopPage.ssxd" show_left="true"></TopNav>
    <div>
      <div v-if="loading" style="text-align: center;">
        <van-loading />
      </div>
      <ul v-else-if="goodsList.length > 0" class="goods-list">
        <li v-for="item in goodsList">
          <dl>
            <dt>{{item.title}}</dt>
            <dd>
              <img :src="item.img?item.img.indexOf('http')>=0?item.img:$api_url.server+item.img:default_img" alt="">
            </dd>
            <dd class="price" style="text-decoration-line: line-through;color:#aaa;">¥{{item.price}}</dd>
            <dd class="price">¥{{item.real_price}}</dd>
            <dd class="btn-buy" @click="handleClickBuy(item.goods_id)">{{ $t('ShopPage.ljgm') }}</dd>
          </dl>
        </li>
      </ul>
      <div style="text-align: center;" v-else>
        <EmptyBox text="$t('ShopPage.zwsp')"/>
      </div>
      <div @click="handleClickShowCart" class="cart-box">
        <span class="cnt">{{goodsCnt}}</span>
        <img src="../../static/img/cart.png" alt="">
      </div>
    </div>
    <nut-popup position="bottom" :overlay="false" closeable close-icon="cross" :style="{ height:'100%' }" v-model="showData" close-icon-position="top-right">
      <div style="padding:1.3rem 0.3rem">
        <div v-if="data.length>0">
          <table class="table">
            <thead>
            <tr>
              <th>{{ $t('ShopPage.mc') }}</th>
              <th>{{ $t('ShopPage.nr') }}</th>
              <th>{{ $t('ShopPage.jg') }}</th>
              <th>{{ $t('ShopPage.sj') }}</th>
            </tr>
            </thead>
            <tbody>
              <tr v-for="item in data">
                <td>{{item.title}}</td>
                <td :id="'copy-here-'+item.id" @click="handleClickCopy('#copy-here-'+item.id)" data-clipboard-action="copy" :data-clipboard-text="item.content">{{item.content}}</td>
                <td>{{item.price}}</td>
                <td>{{item.when}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else>
          <EmptyBox text="ShopPage.zwjl"/>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup, Loading } from 'vant';
import 'vant/lib/cell/style';
import 'vant/lib/cell-group/style';
import 'vant/lib/loading/style';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Loading);
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'ShopPage',
    components: {
        EmptyBox,
      TopNav,
    },
    data () {
    return {
      data:[],
      loading: false,
      showData: false,
      goodsList:[],
      goodsCnt: 0,
      default_img:'../../static/img/goods.png'
    }
  },
    methods:{
      handleClickCopy(elem){
          let clipboard = new this.$clipboard(elem);
          clipboard.on('success', ()=> {
              this.$toast.success(this.$t('ShopPage.fzcg'));
          });
          clipboard.on('error', ()=> {
              this.$toast.fail(this.$t('ShopPage.fzsb'));
          });
      },
      getData(){
          this.$axios.get(this.$api_url.get_carts).then((res)=>{
              console.log(res);
              if(res.data){
                  this.data = res.data;
                  this.goodsCnt = res.data.length;
              }
          })
      },
      getList(){
          this.loading = true;
          this.$axios.get(this.$api_url.shop_list).then((res)=>{
              console.log(res);
              if(res.data){
                  this.goodsList = res.data;
              }
          }).catch((err)=>{

          }).then(()=>{
              this.loading = false;
          })
      },
      handleClickShowCart(){
        if(this.goodsCnt>0){
            this.showData = true;
        }
      },
      handleClickBuy(id){
          this.$dialog2.confirm({
              title: this.$t('ShopPage.wts'),
              message: this.$t("ShopPage.sfjdgm")+'?',
          })
              .then(() => {
                  let loading = this.$toast.loading();
                  this.$axios.post(this.$api_url.buy_shop,this.$qs.stringify({
                      id: id
                  })).then((res)=>{
                      if(res.data.code == 0){
                          this.$toast.success(this.$t('ShopPage.gmcg'));
                          this.goodsCnt++;
                      } else{
                          this.$toast.fail(res.data.msg);
                      }
                  }).catch((err)=>{
                      this.$toast.fail(err.message);
                  }).then(()=>{
                      loading.hide()
                  })
              })
              .catch(() => {
                  // on cancel
              });
      }
    },
    mounted() {
      this.getData();
      this.getList();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .goods-list li{
    float: left;
    width: 33.33%;
    text-align: center;
  }
  .goods-list .price{
    font-size: 0.5rem;
    font-weight: bold;
  }
  dl{
    padding: 0.15rem;
  }
  dl dt{
    font-size:0.4rem;
  }
  .btn-buy{
    background: orange;
    color: #fff;
    padding: 0.1rem;
    border-radius: 0.1rem;
  }
  .goods-list li:nth-child(2){
    border-left: thin solid #ddd;
    border-right: thin solid #ddd;
  }

  .cart-box{
    position: absolute;
    right: 0.5rem;
    bottom:0.5rem;
  }
  .cart-box .cnt{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.4rem;
    background: red;
    color: #fff;
    width: 0.5rem;
    width: 0.6rem;
    text-align: center;
    border-radius: 50%;
    height: 0.6rem;
    line-height: 0.6rem;
  }
  .table{
    width: 100%;
    font-size: 0.4rem;
    border-collapse: collapse;
  }
  .table td, .table th {
    border: thin solid #ccc;
    padding: 0.15rem;
  }
</style>
